<template>
	<view title="预定会议" class="maxBody">
		<view class="add-container1">
			<view class="su-list-cell su-cell">
				<!-- <hd-form type="text" title="人员:" v-model="" disabled=true /> -->
				<view>*预定人员:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{reserveUserName}}</view>
			</view>
			<view class="su-list-cell su-cell">
				<hd-form type="text" title="*会议名称:" v-model="meetingName" />
			</view>
			<view class="su-list-cell su-cell" @click="openRoomPicker">
				<view>*会议地点:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{selectedMeetingName}}</view>
				<view>
					<uv-picker ref="roomPicker" :columns="roomList" keyName="title"
						@confirm="roomNameconfirm"></uv-picker>
				</view>

			</view>
			<view class="su-list-cell su-cell">
				<hd-form @change='changeDate' type="date" title="*会议日期:" placeholder="请选择日期" v-model="reserveDate"
					:dafaultVal='getCurrentDate' />
			</view>
			<view class="select-time">
				<view style=" width: 100% ; height: 150rpx ;  display:flex; ">
					<view class="timezujian" style="margin-left: 23rpx ; position: absolute ">
						<view style="display: flex;">
							<uv-button style="width: 80%; height: 42rpx ; margin: 0 0 0 0; border-width: 1rpx ; padding: 0rpx;
											border-radius: 0rpx ; border-right-style: dashed ; border-right-color: black;
											border-left-style: dashed ; border-top-style: solid ; border-bottom-style: solid;
											border-bottom-color: rgba(0,0,0,0.2); border-top-color: rgba(0,0,0,0.2) " v-for="(item, index) in timeArr"
								:key="index" @click="changTime(item, index)"
								:type="item.status == 0 ? '' : item.status == 1 ? 'error' : item.status == 2 ? 'warning' : 'primary'"
								:disabled="item.status == 1 || item.status == 2" class="button_style" :style="{
											width: '42rpx', height: '60rpx', margin: '0', borderWidth: '1rpx', marginLeft: index === 8 ? '35rpx' : '0' ,
											borderRightStyle: index === 1 || index === 3 || index === 5 || index === 7 || index === 9 || index === 11 || index === 13 || index === 15 ? 'solid' : 'dashed',
											borderRightColor: 'rgba(0,0,0,0.2)',
											borderLeftStyle: index === 0 || index === 8 ? 'solid' : 'dashed',
											borderLeftColor: index === 0 || index === 8 ? 'rgba(0,0,0,0.2)' : 'transparent',
																		  	  }
															  	    ">
							</uv-button>
						</view>

					</view>
					<view
						style=" width: 100%;height: 42rpx; position: absolute ; margin-top: 60rpx; margin-left: 8rpx ; font-size: 10rpx">
						<span
							style="  text-align: center;vertical-align: bottom; float: left; width: 30rpx ; height: 41rpx ; "
							v-for="(item, index) in timeShow" :key="index"
							:style="{ width: '40rpx', height: '42rpx', margin: '0', marginLeft: index === 9 ? '9rpx' : '0' }">{{
															        item.show
															      }}</span>
					</view>
					<view
						style=" width: 100%; height: 42rpx; position: absolute ; margin-top: 105rpx; margin-left:100rpx ; font-size:10rpx ">
						<view style="display:flex; float: left; margin-right:30rpx;">
							<view
								style="background-color:#fcd79e;width:40rpx;height:20rpx;margin-right:20rpx; margin-top: 8rpx;">
							</view>
							<view class="xiao">不可预约</view>
						</view>
						<view style="display:flex; float: left;margin-right:30rpx;">
							<view
								style="background-color:#ffa4a4;width:40rpx;height:20rpx;margin-right:20rpx;margin-top: 8rpx;">
							</view>
							<view class="xiao">已有预约</view>
						</view>
						<view style="display:flex; float: left;margin-right:30rpx;">
							<view
								style="background-color:#3EA7F1;width:40rpx;height:20rpx;margin-right:20rpx;margin-top: 8rpx;">
							</view>
							<view class="xiao">当前预约</view>
						</view>
					</view>
				</view>

			</view>
			<view class="su-list-cell su-cell">
				<view>*会议类型：</view>
				<uni-data-checkbox v-model="isInout" :localdata="modeList"
					@change="changeMeetingMode"></uni-data-checkbox>
			</view>
			<view class="su-list-cell su-cell" style="font-size: 50rpx;">
				<view>*会服人员：</view>

				<uni-data-checkbox v-model="meetingLivery" :localdata="liveryList"
					@change="changeLivery"></uni-data-checkbox>

				<!-- <view class="service-lady" style="font-size: 12rpx;">
					<uni-data-select :localdata="huifuList" @change="changeHuifu" style="width: 160rpx;"
						:disabled="this.meetingLivery == 0"></uni-data-select>
				</view> -->

			</view>
			<view class="su-list-cell su-cell" style="color: red;">
				以下为非必填项目
			</view>
			<view class="su-list-cell su-cell">
				<view style="display: flex;">
					<view style="margin-right: 10rpx;">设备需求：</view>
					<uv-checkbox-group placement="row" v-model="selectedGoodIds">
						<uv-checkbox :customStyle="{marginBottom: '8px',marginRight:'10px'}"
							@change="changeSelectedGood" v-for="(item,index) in goodList" :key="item.id" :name="item.id"
							:label="item.name"></uv-checkbox>
					</uv-checkbox-group>

				</view>


			</view>
			<view class="su-list-cell su-cell">
				<view>物品需求：</view>
				<uv-checkbox-group placement="row" v-model="selectedDeviceIds">
					<uv-checkbox :customStyle="{marginBottom: '8px',marginRight:'10px'}" @change="changeSelectedDevice"
						v-for="(item,index) in deviceList" :key="item.id" :name="item.id"
						:label="item.name"></uv-checkbox>
				</uv-checkbox-group>

			</view>
			<view class="su-list-cell su-cell" @tap="show">
				<view>参与人员：</view>
				<uv-text :lines="1" :text="this.selectedAccountNames">
				</uv-text>
				<!-- <view class="show-btn" @tap="show">点击显示</view> -->

				<uni-popup ref="cityMore" type="bottom">
					<more-selecttwo :cityData="departmentList" @chooseCity="chooseCity" @switchCity="switchCity"
						:cityIndex="cityIndex" @scrollCity="scrollCity" @closeCity="closeCity" @queryCity="queryCity"
						:oldScrollTop="oldScrollTop" :scrollTop="scrollTop" :chooseCityList="chooseCityList"
						:title="title" :cityIdArr="cityIdArr" @delCity="delCity" ref="moreselects" :maxCount="maxCount"
						:level="level" :colorValue="colorValue"></more-selecttwo>
				</uni-popup>

			</view>
			<view class="su-list-cell su-cell" style="margin-bottom: 30rpx;">
				<view>其他需求：</view>
				<uv-textarea v-model="contents" :maxlength="-1" autoHeight placeholder="请输入其他需求"></uv-textarea>
			</view>
		</view>

		<view class="add-container2">
			<view>
				<uv-row customStyle="margin-bottom: 0px">
					<uv-col span="12">
						<view class="spantop">会议费用清单</view>
					</uv-col>
				</uv-row>
				<uv-row justify="space-between">
					<uv-col span="3">
						<view class="demo-layout  bg-purple-4 bg-purple-4-start">预定人员</view>
					</uv-col>
					<uv-col span="3">
						<view class="demo-layout bg-purple-4">{{this.reserveUserName}}</view>
					</uv-col>
					<uv-col span="3">
						<view class="demo-layout bg-purple-4">会议室</view>
					</uv-col>
					<uv-col span="3">
						<view class="demo-layout  bg-purple-4 bg-purple-4 bg-purple-4-end">
							{{this.selectedMeetingAddress}}
						</view>
					</uv-col>
				</uv-row>
				<uv-row customStyle="margin-bottom: 0px">
					<uv-col span="3">
						<view class="demo-layout bg-purple-time">预定时间</view>
					</uv-col>
					<uv-col span="9">
						<view class="demo-layout bg-purple-time2">{{this.showReserveDate + '-' + this.timeStart + '-' +
        this.timeEnd}}
						</view>
					</uv-col>
				</uv-row>
				<uv-row customStyle="margin-bottom: 0px ; ">



					<uv-col span="3">
						<view class="demo-list-left" style="">材料清单</view>
					</uv-col>
					<uv-col span="9">
						<view class="demo-list-right">
							<div v-for="(item, index) in showDeviceList" :key="index" class="item-row">
								<uv-input border="" v-model="item.name" class="device-name" disabled=true>
								</uv-input>
								<uv-input border="" v-model="item.price" class="device-price" disabled=true>
									<template v-slot:suffix>
										<uv-text size='14' text="元/" margin="0 3px 0 0"></uv-text>
									</template>
								</uv-input>

								<uv-input border="" v-model="item.unit" class="device-unit" disabled=true>

								</uv-input>

								<uv-input border="surround" v-model="item.num" class="device-num" type="number"
									placeholder="数量"></uv-input>
								<uv-input border="" v-model="item.num * item.price" class="device-grossPrice"
									type="number" disabled=true></uv-input>
							</div>
							<div v-for="(item, index) in showGoodList" :key="index" class="item-row">
								<uv-input border="" v-model="item.name" class="device-name" disabled=true>
								</uv-input>

								<uv-input border="" v-model="item.price" class="device-price" disabled=true>
									<template v-slot:suffix>
										<uv-text size='14' text="元/" margin="0 3px 0 0"></uv-text>
									</template>
								</uv-input>

								<uv-input border="" v-model="item.unit" class="device-unit" disabled=true>
								</uv-input>
								<uv-input border="surround" v-model="item.num" class="device-num" type="number"
									placeholder="数量"></uv-input>
								<uv-input border="" v-model="item.num * item.price" class="device-grossPrice"
									type="number" disabled=true></uv-input>
							</div>
						</view>
					</uv-col>
				</uv-row>

				<uv-row customStyle="margin-bottom: 0px">
					<uv-col span="3">
						<view class="demo-xiao-left "></view>
					</uv-col>
					<uv-col span="9">
						<view class="demo-xiao-right ">小计：{{this.xiaoji}}</view>
					</uv-col>
				</uv-row>
				<uv-row customStyle="margin-bottom: 0px">
					<uv-col span="3">
						<view class="demo-layout bg-purple-left">会议价格</view>
					</uv-col>
					<uv-col span="9">
						<view class="demo-layout bg-purple">{{ this.isInout }}共{{ this.differenceInMinutes }}小时，
							共计{{ this.meetingAndTimePrice }} 元</view>
					</uv-col>
				</uv-row>
				<uv-row customStyle="margin-bottom: 0px">
					<uv-col span="3">
						<view class="demo-layout bg-purple-left">固定费用</view>
					</uv-col>
					<uv-col span="9">
						<view class="demo-layout bg-purple">{{roomFixedPrice}}元</view>
					</uv-col>
				</uv-row>
				<uv-row customStyle="margin-bottom: 0px">

					<uv-col span="3">
						<view class="demo-layout bg-purple-left">合计</view>
					</uv-col>
					<uv-col span="9">
						<view class="demo-layout bg-purple">{{this.totalPrice}}</view>
					</uv-col>
				</uv-row>

			</view>
		</view>
		<!-- <uv-button @click="textChangeSelectedGood" style="margin-bottom: 60rpx;">测试</uv-button> -->
		<view class="button-container">
			<!-- 	<uv-button type="primary" :plain="true" :hairline="true" text="预定会议" class="reverseButton"
				@click="showAppointedTimeArr"></uv-button> -->
			<uv-button type="primary" :plain="true" :hairline="true" text="预定会议" class="reverseButton"
				@click="submitForm"></uv-button>
		</view>
		<view style="height: 150px;">
		</view>
		<uv-toast ref="toast"></uv-toast>

	</view>
</template>

<script>
	import api from '@/api/api.js';
	import util from '@/api/util.js'
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	import moreSelect from '../../changeMoreSelect/components/more-select.vue'
	import moreSelecttwo from '../../changeMoreSelect/components/more-selecttwo.vue'



	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			baTreePicker,
			moreSelect,
			moreSelecttwo
		},

		computed: {
			...mapState(['selectedDeviceList', 'selectedGoodList']),
			meetingAndTimePrice() {
				return this.differenceInMinutes * this.roomPrice;
			},
			totalPrice() {
				let total = 0;
				total = this.xiaoji + this.roomFixedPrice + this.meetingAndTimePrice + this
					.roomHandlingExpense;
				if (this.isInout == '内部会议') {
					return total;
				} else {
					return total + total * (this.roomTaxRate / 100);
				}
			},
			showGoodList() {
				return this.goodList.filter(item => this.selectedGoodIds.includes(item.id));
			},
			showDeviceList() {
				return this.deviceList.filter(item => this.selectedDeviceIds.includes(item.id));
			},
		},
		watch: {
			isInout(val) {
				if (val == '外部会议') {
					this.meetingLivery = 1;
				}
			},
			timeStart() {
				this.getResultTimeNumber(this.timeStart, this.timeEnd);
			},
			timeEnd() {
				this.getResultTimeNumber(this.timeStart, this.timeEnd);
			},
			chooseCityList(val) {
				if (val == []) {
					this.selectedAccountNames = '';
				}
			}

		},
		created() {
			this.isAdmin();
			this.queryDepartmentList();
			this.queryCurrentUserId();
			this.queryCurrentUser();
			this.queryRoomList();
			this.queryGoodsList();
			this.queryAccountList();
			this.queryHuifuList();
			this.startInterval();

		},
		data() {
			return {
				selectedMeetingAddress: '',
				selectedDeviceIds: [],
				selectedGoodIds: [],
				textList: [{
						name: 'apple',
						label: '苹果'
					},
					{
						name: 'banana',
						label: '香蕉'
					}
				],
				level: 2,
				title: '选择人员',
				chooseCityList: [],
				cityIdArr: [],
				cityData: [],
				scrollTop: 0,
				oldScrollTop: 0,
				cityIndex: 0,
				maxCount: 999,
				cityName: "",
				colorValue: "#016CE1",
				huifuId: '1',
				huifuList: [],
				reverseButtonTitle: '预约会议',
				userFlag: true,
				selectedServiceLady: [],
				serviceLady: [],
				showTimeStart: '',
				showTimeEnd: '',
				buga: 0,
				xiaoji: 0,
				goodTotal: 0,
				deviceTotal: 0,
				finalSelectedDeviceList: [],
				finalSelectedGoodList: [],
				roomTaxRate: 0,
				roomHandlingExpense: 0,
				goodTotalPrice: 0,
				deviceTotalPrice: 0,
				// selectedGoodList: [],
				roomFixedPrice: 0,
				inPrice: 0,
				outPrice: 0,
				roomPrice: 0,
				differenceInMinutes: 0,
				isInout: '内部会议',
				timeStart: '',
				timeEnd: '',
				showReserveDate: this.getShowCurrentDate(),
				departmentList: [],
				contents: '',

				newDeviceList: [],
				deviceList: [],
				goodList: [],
				accountList: [],
				appointTimeArr: [],
				selectedMeetingName: '',
				selectedRoomId: '',
				deleteItem: null,
				showRight: false,
				meetingMode: '1',
				meetingLivery: 0,
				meetingName: '',
				reserveDate: this.getCurrentDate(),
				reserveUserName: '',
				roomList: [],
				selectedAccountIds: [],
				selectedDepartmentIds: [],
				tipList: [{
					type: 'default',
					title: '默认主题',
					message: "锦瑟无端五十弦"
				}, {
					type: 'error',
					icon: false,
					title: '失败主题',
					message: "一弦一柱思华年"
				}, {
					type: 'success',
					title: '成功主题(带图标)',
					message: "庄生晓梦迷蝴蝶"
				}, {
					type: 'loading',
					title: '正在加载',
					message: "正在加载"
				}, {
					type: 'default',
					title: '结束后跳转标签页',
					message: "此情可待成追忆",
					url: '/pages/componentsD/tag/tag'
				}],
				selectedAccountNames: '',
				timeShow: [{
						show: '8'
					},
					{
						show: ''
					},
					{
						show: '9'
					},
					{
						show: ''
					},
					{
						show: '10'
					},
					{
						show: ''
					},
					{
						show: '11'
					},
					{
						show: ''
					},
					{
						show: '12'
					},
					{
						show: '13'
					},
					{
						show: ''
					},
					{
						show: '14'
					},
					{
						show: ''
					},
					{
						show: '15'
					},
					{
						show: ''
					},
					{
						show: '16'
					},
					{
						show: ''
					},
					{
						show: '17'
					}

				],
				timeArr: [{
						'timeBegin': '08:00',
						'timeOver': '08:30',
						'status': 0
					},
					{
						'timeBegin': '08:30',
						'timeOver': '09:00',
						'status': 0
					},
					{
						'timeBegin': '09:00',
						'timeOver': '09:30',
						'status': 0
					},
					{
						'timeBegin': '09:30',
						'timeOver': '10:00',
						'status': 0
					},
					{
						'timeBegin': '10:00',
						'timeOver': '10:30',
						'status': 0
					},
					{
						'timeBegin': '10:30',
						'timeOver': '11:00',
						'status': 0
					},
					{
						'timeBegin': '11:00',
						'timeOver': '11:30',
						'status': 0
					},
					{
						'timeBegin': '11:30',
						'timeOver': '12:00',
						'status': 0
					},
					{
						'timeBegin': '13:00',
						'timeOver': '13:30',
						'status': 0
					},

					{
						'timeBegin': '13:30',
						'timeOver': '14:00',
						'status': 0
					},
					{
						'timeBegin': '14:00',
						'timeOver': '14:30',
						'status': 0
					},
					{
						'timeBegin': '14:30',
						'timeOver': '15:00',
						'status': 0
					},
					{
						'timeBegin': '15:00',
						'timeOver': '15:30',
						'status': 0
					},
					{
						'timeBegin': '15:30',
						'timeOver': '16:00',
						'status': 0
					},
					{
						'timeBegin': '16:00',
						'timeOver': '16:30',
						'status': 0
					},
					{
						'timeBegin': '16:30',
						'timeOver': '17:00',
						'status': 0
					}

				],
				defaultTimeArr: [{
						'timeBegin': '08:00',
						'timeOver': '08:30',
						'status': 0
					},
					{
						'timeBegin': '08:30',
						'timeOver': '09:00',
						'status': 0
					},
					{
						'timeBegin': '09:00',
						'timeOver': '09:30',
						'status': 0
					},
					{
						'timeBegin': '09:30',
						'timeOver': '10:00',
						'status': 0
					},
					{
						'timeBegin': '10:00',
						'timeOver': '10:30',
						'status': 0
					},
					{
						'timeBegin': '10:30',
						'timeOver': '11:00',
						'status': 0
					},
					{
						'timeBegin': '11:00',
						'timeOver': '11:30',
						'status': 0
					},
					{
						'timeBegin': '11:30',
						'timeOver': '12:00',
						'status': 0
					},
					{
						'timeBegin': '12:00',
						'timeOver': '12:30',
						'status': 0
					},

					{
						'timeBegin': '13:00',
						'timeOver': '13:30',
						'status': 0
					},
					{
						'timeBegin': '13:30',
						'timeOver': '14:00',
						'status': 0
					},
					{
						'timeBegin': '14:00',
						'timeOver': '14:30',
						'status': 0
					},
					{
						'timeBegin': '14:30',
						'timeOver': '15:00',
						'status': 0
					},
					{
						'timeBegin': '15:00',
						'timeOver': '15:30',
						'status': 0
					},
					{
						'timeBegin': '15:30',
						'timeOver': '16:00',
						'status': 0
					},
					{
						'timeBegin': '16:00',
						'timeOver': '16:30',
						'status': 0
					}

				],
				modeList: [{
						text: '内部会议',
						value: '内部会议'
					},
					{
						text: '外部会议',
						value: '外部会议'
					}
				],
				liveryList: [{
						text: '无需会服',
						value: 0
					}, {
						text: '需要会服',
						value: 1
					},

				]
			}
		},

		methods: {
			//定时任务计算总价
			startInterval() {
				this.intervalId = setInterval(() => {
					this.submitData();
				}, 1000);
			},
			//------------定时任务具体方法----
			submitData() {
				this.xiaoji = 0;
				this.showGoodList.forEach(item => {
					this.xiaoji += item.num * item.price;
				});
				this.showDeviceList.forEach(item => {
					this.xiaoji += item.num * item.price;
				});
			},
			textChangeSelectedGood() {
				console.log(this.selectedGoodIds);
			},
			changeSelectedGood(e) {
				console.log(e);
			},
			showToast(params) {
				console.log(params);
				this.$refs.toast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			show() {
				console.log(this.level)
				if (this.level == 1) {
					this.cityData = LevelOneData
				} else {
					this.cityData = this.departmentList;
				}
				this.$refs.cityMore.open()
			},
			switchLevel(id) {
				this.resetData()
				this.level = id
			},
			resetData() {
				this.cityIdArr = []
				this.chooseCityList = []
			},
			delCity(delId) {
				this.cityIdArr.forEach((item, index) => {
					if (this.chooseCityList[delId].id == item) {
						this.cityIdArr.splice(index, 1);
					}
				})
				this.chooseCityList.splice(delId, 1);
				this.$nextTick(() => {
					this.$refs.moreselects.getViewHeight();
				});
			},
			chooseCity(item) {
				console.log(item)
				console.log(this.cityIdArr)
				//先判断Id是否在数组中
				if (this.cityIdArr.includes(item.id)) {
					this.chooseCityList.forEach((val, key) => {
						if (val.id == item.id) { //如果在数组中，反选（删除）
							this.delCity(key)
						}
					})
					return false
				}

				if (this.chooseCityList.length >= this.maxCount) {
					uni.showToast({
						title: '最多选择' + this.maxCount + '个',
						icon: "none",
						duration: 2000
					});
					return false
				}
				let obj = {}
				if (this.level == 1) {
					obj = {
						"id": item.id,
						"name": item.name
					}
				} else if (this.level == 2) {
					obj = {
						"id": item.id,
						"name": item.name,
						"pid": item.pid,
						"pname": item.parentName
					}
				} else if (this.level == 3) {
					console.log(item)
					obj = {
						"id": item.id,
						"name": item.oneName + item.twoName + item.name,
						"oneId": item.oneId,
						"twoId": item.twoId,
						"oneName": item.oneName,
						"twoName": item.twoName,
						"threeName": item.name
					}
				}

				this.cityIdArr.push(item.id)
				this.chooseCityList.push(obj)
				//调用子组件方法动态改变滚动栏高度
				this.$nextTick(() => {
					this.$refs.moreselects.getViewHeight();
				});

			},
			showAppointedTimeArr() {
				console.log(this.timeStart, this.timeEnd);
				console.log(this.appointTimeArr);
			},
			switchCity(index) {
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				this.cityIndex = index
			},
			scrollCity(val) {
				//记录scroll  位置
				this.oldScrollTop = val
			},
			closeCity() {
				this.$refs.cityMore.close()
			},
			queryCity() {
				console.log(this.chooseCityList);
				this.selectedAccountNames = this.chooseCityList.map(item => item.name).join('、');
				this.$refs.cityMore.close()
			},
			goodToggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			changeHuifu(e) {
				// console.log(e);
				this.huifuId = e;
			},
			getShowCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				// this.showReserveDate = this.changeDate(year + '/' + month + '/' + day)
				return `${year}年${month}月${day}日`;
			},
			getCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				// this.showReserveDate = this.changeDate(year + '/' + month + '/' + day)
				return `${year}/${month}/${day}`;
			},
			submitForm() {
				if (!this.meetingName || !this.selectedRoomId || !this.timeStart || !this.timeEnd || !this.reserveDate) {
					this.showToast({
						type: 'warning',
						title: '表单输入有错误',
						message: '请检查必填项是否正确'
					});
					return;
				}
				//格式化预约的两个时间船渡给后端
				this.saveAppoint();
				//格式化部门与人员ID传递
				this.selectedDepartmentIds = this.chooseCityList.map(item => item.pid);
				this.selectedAccountIds = this.chooseCityList.map(item => item.id);
				//格式化设备和物品集合
				const newDeviceList = this.showDeviceList.map(item => ({
					deviceId: item.id,
					deviceName: item.name,
					devicePrice: item.price,
					deviceNum: item.num,
					deviceGross: item.num * item.price,
					deviceUnit: item.unit
				}));
				const newGoodList = this.showGoodList.map(item => ({
					goodId: item.id,
					goodUnit: item.unit,
					goodPrice: item.price,
					goodName: item.name,
					goodNum: item.num,
					grossPrice: item.num * item.price
				}));
				let form = {
					name: this.meetingName,
					content: this.contents,
					roomId: this.selectedRoomId,
					totalPrice: this.totalPrice,
					accountIds: this.selectedAccountIds,
					reserveStartTime: this.showTimeStart,
					reserveEndTime: this.showTimeEnd,
					isInout: this.isInout,
					livery: this.meetingLivery,
					liveryId: this.huifuId,
					departmentIds: this.selectedDepartmentIds,
					handlingExpense: this.roomHandlingExpense,
					taxRate: this.roomTaxRate,
					employCreateBoRequestslist: newGoodList,
					equipmentCreateBoRequestslist: newDeviceList
				}
				console.log(form);
				let params = Object.assign({}, form);
				util.request(
					api.CreateMeeting, params,
					'POST'
				).then((data) => {
					this.showToast({
						type: 'success',
						title: '创建成功',
						message: '预约会议成功'
					});
					uni.getStorage({
						key: 'roleId',
						success: (res) => {
							console.log('获取当前的roleId', res.data);
							if (res.data == 1) {
								setTimeout(() => {
									console.log('aaa');
									//重新加载关闭所有页面
									uni.reLaunch({
										url: './myMeetings'
									});
								}, 1000);
							} else {
								setTimeout(() => {
									uni.reLaunch({
										url: './myMeeting'
									});
								}, 1000);
							}
						}
					});

				})

			},
			formatFinalStartDateTime(date, time) {
				const givenDate = new Date(date);
				console.log(time);
				const [hours, minutes] = time.split(':').map(Number);
				const newDate = new Date(givenDate.getFullYear(), givenDate.getMonth(), givenDate.getDate(), hours,
					minutes);
				this.showTimeStart = newDate.getTime();
			},
			formatFinalEndDateTime(date, time) {
				const givenDate = new Date(date);
				const [hours, minutes] = time.split(':').map(Number);
				const newDate = new Date(givenDate.getFullYear(), givenDate.getMonth(), givenDate.getDate(), hours,
					minutes);
				this.showTimeEnd = newDate.getTime();
			},
			changeMeetingMode(e) {
				this.getMeetingPrice(e.detail.data.value)
			},
			changeLivery(e) {
				this.meetingLivery = e.detail.data.value;
			},
			//获取内外会议价格
			getMeetingPrice(type) {
				if (type == '内部会议') {
					this.roomPrice = this.inPrice;
					//this.form.livery = '0'
					return this.inPrice;
				} else if (type == '外部会议') {
					this.roomPrice = this.outPrice;
					//  this.form.livery = '1'
					return this.roomPrice;
				}
				return 0;
			},
			//计算时间差  辅助方法：将时间字符串（HH:MM）转换为分钟  以分钟为单位
			timeToMinutes(timeStr) {
				const [hours, minutes] = timeStr.split(':').map(Number);
				return hours * 60 + minutes;
			},
			//计算时间差 用于计算会议室使用价格
			getResultTimeNumber(startTime, endTime) {
				let startMinutes = this.timeToMinutes(startTime);
				let endMinutes = this.timeToMinutes(endTime);
				// 计算时间差（分钟）
				// 将时间差转换为小时，并保留小数部分
				this.differenceInMinutes = (endMinutes - startMinutes) / 60;
			},
			changeDate(e) {
				// console.log(typeof(e), e);
				//2024/10/23
				let dateTime = new Date(e);
				// 给Date对象加1个小时（注意：1小时 = 60分钟 = 3600000毫秒）  
				dateTime.setTime(dateTime.getTime() + 3600000);
				// 将Date对象转换为时间戳（毫秒数）  
				let timestamp = dateTime.getTime();

				this.getAppointed(timestamp);
				this.showReserveDate = this.formatDateFromTimestamp(timestamp);
			},
			//格式化日期部分展示到右侧清单中
			formatDateFromTimestamp(timestamp) {
				// 将时间戳转换为Date对象  
				const date = new Date(timestamp);
				// 提取年、月、日  
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1，并使用padStart填充为两位数  
				const day = String(date.getDate()).padStart(2, '0'); // 使用padStart填充为两位数  
				// 根据你的要求，将日期格式化为“年 月 日”的中文格式  
				// 注意：这里直接使用字符串拼接来形成中文日期格式  
				return `${year}年${month}月${day}日`;
			},
			async queryHuifuList() {
				let param = {
					pageSize: 1000,
					pageNum: 1,
					roleId: 1
				};
				await util.request(
					api.Account, param,
					'GET'
				).then((data) => {
					console.log(data);
					this.huifuList = data.rows.map(item => ({
						text: item.name,
						value: item.id
					}));

				})

			},

			async getAppointed(val) {
				let param = {
					roomId: this.selectedRoomId,
					currentData: val
				};
				console.log(param);
				await util.request(
					api.MettingCheckCreate, param,
					'POST'
				).then((data) => {
					console.log(data);
					let a = data;
					this.timeArr = a;

				})

			},
			//保存预约时间
			saveAppoint() {
				this.formatFinalStartDateTime(this.reserveDate, this.timeStart);
				this.formatFinalEndDateTime(this.reserveDate, this.timeEnd);
			},
			change() {},
			showPicker() {
				console.log('掉用了点击事件');
				this.$refs.treePicker._show();
			},
			changeDevice(e) {
				// console.log('弹窗状态改变：', e);
			},
			changTime(val, index) {
				if (this.appointTimeArr.length < 2) {
					this.timeArr[index].status = 3;
					this.appointTimeArr.push(index);
					if (this.appointTimeArr.length == 2) {
						//同一块入如果点击之后再点击就取消选中状态
						if (this.appointTimeArr[0] == this.appointTimeArr[1]) {
							this.timeArr[this.appointTimeArr[0]].status = 0;
							this.appointTimeArr = [];
						} else {
							this.appointTimeArr = this.appointTimeArr.sort(function(a, b) {
								return a - b;
							});
							let len = this.appointTimeArr[1] - this.appointTimeArr[0];
							//判断预约的时间段内是否有已经预约的时间段
							for (let i = 0; i < len; i++) {
								if (this.timeArr[this.appointTimeArr[0] + i].status == 1) {
									this.$message.warning('已预约过的时间不允许预约！');
									this.timeStart = '';
									this.timeEnd = '';
									this.appointTimeArr = [];
									break;
								} else {
									this.timeArr[this.appointTimeArr[0] + i].status = 3;
									this.timeStart = this.timeArr[this.appointTimeArr[0]].timeBegin;
									this.timeEnd = this.timeArr[this.appointTimeArr[1]].timeOver;

								}
							}

						}
					} else if (this.appointTimeArr.length == 1) { //当只点击了一块时，即只选择半个小时
						this.timeArr[this.appointTimeArr[0]].status = 3;
						this.timeStart = this.timeArr[this.appointTimeArr[0]].timeBegin;
						this.timeEnd = this.timeArr[this.appointTimeArr[0]].timeOver;
					}
				} else if (this.appointTimeArr.length = 3) { //当前选中数组的长度等于3时，即点击了3次，则把前两个状态改为0，即未选中，把第三次点击时的状态设为3，即当前选中
					for (let i = 0; i < this.timeArr.length; i++) {
						if (this.timeArr[i].status === 3) {
							this.timeArr[i].status = 0;
						}
					}
					this.appointTimeArr = [];
					// this.appointTimeArr.push(index);         //解决时间选择与右侧表单数据不一致问题
					// this.timeArr[index].status = 3;
				}
			},
			isAdmin() {
				uni.getStorage({
					key: 'roleId',
					success: (res) => {
						console.log('获取当前的roleId', res.data);
						if (res.data == 1) {
							uni.setTabBarItem({
								index: 1,
								visible: false
							});
						} else {
							uni.setTabBarItem({
								index: 0,
								visible: false
							});
						}
					}
				});
			},
			roomNameconfirm(e) {
				console.log(e.value[0]);
				this.selectedRoomId = e.value[0].id;
				this.selectedMeetingName = e.value[0].title;
				this.selectedMeetingAddress = e.value[0].address;
				this.inPrice = e.value[0].inPrice;
				this.outPrice = e.value[0].outPrice;
				this.roomFixedPrice = e.value[0].fixedPrice;
				this.roomHandlingExpense = e.value[0].handlingExpense;
				this.roomTaxRate = e.value[0].taxRate;
				this.getMeetingPrice(this.isInout);
				this.deviceList = e.value[0].deviceList;
				let dateTime = new Date(this.reserveDate);
				// 给Date对象加1个小时（注意：1小时 = 60分钟 = 3600000毫秒）  
				dateTime.setTime(dateTime.getTime() + 3600000);
				// 将Date对象转换为时间戳（毫秒数）  
				let timestamp = dateTime.getTime();
				this.getAppointed(timestamp)
				// this.changeDate(this.reserveDate);

			},
			openPicker() {
				this.$refs.accountPicker.open();
			},
			openRoomPicker() {
				this.$refs.roomPicker.open();
			},
			queryDepartmentList() {
				util.request(
					api.DepartmentUrl, {},
					'GET'
				).then((data) => {
					this.departmentList = data.rows.map(item => {
						const newItem = {
							...item,
							children: item.accounts.map(subItem => ({
								...subItem,
								pid: item.id
							}))
						};
						delete newItem.accounts;
						return newItem;
					});
					console.log(this.departmentList);
				})
			},
			queryCurrentUser() {
				uni.getStorage({
					key: 'passport',
					success: (res) => { // 使用箭头函数  
						this.reserveUserName = res.data; // 现在这里的 this 指向 Vue 组件实例  

					}
				});
			},
			queryCurrentUserId() {
				util.request(
					api.AccountCurrent, {},
					'GET'
				).then((res) => {
					this.selectedAccountIds.push(res.id);
					this.selectedDepartmentIds.push(res.departmentId);
					this.cityIdArr.push(res.id);
					this.chooseCityList.push({
						id: res.id,
						name: res.name,
						pid: res.departmentId,
						parentName: res.departmentName
					});
					this.selectedAccountNames = res.name;

				});
			},
			async queryRoomList() {
				await util.request(
					api.RoomUrl, {},
					'GET'
				).then((data) => {
					// console.log(data);
					this.roomList.push(data.rows)
					// console.log(this.roomList);

				})

			},
			queryAccountList() {
				//获取人员列表
				util.request(
					api.Account, {},
					'GET'
				).then((data) => {
					// console.log(data); 
					this.accountList.push(data.rows)
					// console.log(this.accountList);
				})

			},
			async queryGoodsList() {
				await util.request(
					api.GoodsUrl, {},
					'GET'
				).then((data) => {
					this.goodList = data.rows;
				})
			},

		},


	};
</script>
<style lang="scss" scoped>
	// .button_style {
	//   text-align: center;
	//   float: left;
	//   width: 20px;
	// }
	.uv-button--normal {
		padding: 0px 0px !important;
	}

	.timezujian {
		uni-button {
			width: 22rpx;
		}
	}

	.city-box {
		margin-bottom: 50px;
	}

	.xiao {
		font-size: 14rpx;
	}

	.su-list-cell {
		font-size: 19px;
	}

	.pl-select-text {
		padding: 18upx 38upx;

		text {
			font-size: 28upx;
			color: #434343;
		}
	}

	.add-container1 {
		background-color: #FFFFFF;
	}

	.add-container2 {
		border-left: solid 1px #CCC;
		margin-left: 12px;
		margin-right: 12px;
		margin-top: 10px;
		background-color: #FFFFFF;
		height: auto;
		// border-radius: 12upx;
	}

	.maxBody {
		background-color: #f7f7f7;
	}
</style>
<style>
	.item {
		margin: 10rpx 0;
		padding: 10rpx;
		text-align: center;
		background: #f1f1f1;
		font-size: 28rpx;
		color: #666;
	}

	.participant-header {
		position: relative;
		height: 17px;
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 12upx;
	}

	.add-icon {
		position: absolute;
		top: 0;
		right: 0;
	}

	.top-left {
		color: #757575;
		font-size: 12px;
		position: absolute;
		top: 8px;
		left: 6;
	}

	uni-button:after {
		border: none;
	}

	.custom-button {
		background-color: white;
	}

	.word-btn-black {
		color: black;
	}

	.smaller-plus {
		font-size: 12px;
		background-color: white;
		color: black;
	}
</style>
<style>
	.device-num {
		flex: 0.5;
	}

	.device-check {
		margin-left: 20rpx;
		flex: 0.8;
		background-color: white;
	}

	.device-price {
		flex: 1;
		padding-right: 0rpx !important;
		background-color: white !important;

	}

	.device-name {
		flex: 1.1;
		background-color: white !important;
	}

	.device-unit {
		flex: 0.7;
		padding-left: 0rpx !important;
		background-color: white !important;
	}

	.device-grossPrice {
		flex: 0.4;
		padding-left: 40rpx !important;
		background-color: white !important;
	}

	.item-row {
		display: flex;
		justify-content: space-between;
	}

	.column-num {
		flex: 0.7;
		background-color: white !important;
	}

	.column-name {
		padding-left: -15rpx !important;
		flex: 1;
	}

	.column-check {
		padding-left: 30rpx;
		flex: 1;
	}

	.column-price {
		flex: 1;
	}

	.column-num {
		flex: 1;
	}

	.column-gorssPrice {
		flex: 1;
		/* padding-right: 10rpx; */

	}
</style>
<style lang="scss">
	.button-container {
		// border: 1rpx solid black;
		display: flex;
		justify-content: center;
		// margin-top: 15rpx;

	}

	.reverseButton {
		margin-top: 30rpx;
		border-radius: 30rpx;
		width: 32vw;
	}

	.demo-layout {
		height: 30px;

	}

	.demo-list-left {
		min-height: 200px;
		// height: 200px;
		padding-top: 100px;
		// margin-left: 10px;
		// border-left: 1px solid #CCC;
		// border-right: 1px solid #CCC;
		text-align: center;
	}

	.demo-list-right {
		// height: 200px;
		min-height: 200px;
		// margin-right: 10px;
		margin-left: -2rpx;
		text-align: center;
		border-right: 1px solid #CCC;
		border-left: 1px solid #CCC;
		border-bottom: 1px solid #CCC;

	}

	.demo-xiao-left {
		height: 30px;
		// margin-left: 10px;
		// border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
	}


	.demo-xiao-right {
		height: 30px;
		// margin-right: 10px;
		// border-left: 1px solid #CCC;
		padding-left: 15px;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
	}



	.spantop {
		border: 1px solid #CCC;
		border-left: none;
		height: 30px;
		// margin-right: 10px;
		// margin-left: 10px;
		text-align: center;
		background-color: white;

	}

	.bg-purple {
		// margin-right: 10px;s
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		padding-left: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		// background: #CED7E1;
		background-color: white;
	}

	.bg-purple-left {
		// margin-left: 10px;
		// border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		// background: #e5e9f2;
		background-color: white;
	}

	.bg-purple-time {
		// margin-left: 10px;
		// border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		background-color: white;
	}


	.bg-purple-time2 {
		// margin-right: 10px;
		// border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		background-color: white;
	}

	.bg-purple-4 {
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		background: #e5e9f2;
		background-color: white;
	}

	.bg-purple-4-start {
		// margin-left: 10px;

		// border-left: 1px solid #CCC;
	}

	.bg-purple-4-end {
		// margin-right: 10px;
	}


	.bg-purple-dark {
		background: #99a9bf;
	}

	.uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0 !important;
	}

	//
	//                  ___====-_  _-====___
	//            _--^^^#####//      \\#####^^^--_
	//         _-^##########// (    ) \\##########^-_
	//        -############//  |\^^/|  \\############-
	//      _/############//   (@::@)   \############\_
	//     /#############((     \\//     ))#############\
	//    -###############\\    (oo)    //###############-
	//   -#################\\  / VV \  //#################-
	//  -###################\\/      \//###################-
	// _#/|##########/\######(   /\   )######/\##########|\#_
	// |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
	// `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
	//    `   `  `      `   / | |  | | \   '      '  '   '
	//                     (  | |  | |  )
	//                    __\ | |  | | /__
	//                   (vvv(VVV)(VVV)vvv)
	//
	//     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	//
	//               神兽保佑            永无BUG
</style>